<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>主轴和交叉轴</title>
    <link rel="stylesheet" href="axis.css">
</head>
<body>
    <h1>主轴和交叉轴</h1>
    <p>主轴由 flex-direction属性来确定</p>
    <P>交叉轴与主轴垂直</P>
    <div class="wrapper">
        <p class="title"></p>
        <!-- 同一个元素 class 取值可以包含多个class-name，用空格隔开 -->
        <div class="flex-container first">
            <div class="flex-item">东</div>
            <div class="flex-item">华</div>
            <div class="flex-item">理</div>
            <div class="flex-item">工</div>
        </div>
        <p class="desc"></p>
    </div>
</body>
</html>